<template>
  <div>
    <div class="active">
      <div class="header">房屋总览</div>
      <div class="bodyobj">
        <div class="body">
          <div class="description">
            <span>楼栋总数</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-房屋分析_slices/楼栋总数.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>社区房屋总数</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-房屋分析_slices/房屋总数.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>自住房</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-房屋分析_slices/自住房.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>出租房</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-房屋分析_slices/出租房.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>群租房</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-房屋分析_slices/群租房.png" alt />
        </div>
        <div class="body">
          <div class="description">
            <span>空置房</span>
            <br />
            <i>28</i>
          </div>
          <img src="../../assets/切图-房屋分析_slices/空置房.png" alt />
        </div>
      </div>
    </div>

    <div class="bottomoffset">
      <div class="father1">
        <div id="square" />
        <div class="son1">
          <div>各楼栋自住/租住统计</div>
        </div>
      </div>

      <div class="father2">
        <div id="pies" />
        <div class="son2">
          <div>各类型房屋占比统计</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "Dashboard",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    var myChart1 = echarts.init(document.getElementById("pies"));
    var myChart2 = echarts.init(document.getElementById("square"));
    var option1 = {
      color: ["#3CB2EF", "#66E0E3", "#FEDB5B", "#FF9F7F"],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "28%",
        orient: "horizontal",
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告"]
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 335, name: "直接访问" },
            { value: 310, name: "邮件营销" },
            { value: 234, name: "联盟广告" },
            { value: 135, name: "视频广告" }
          ]
        }
      ]
    };
    var option2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      color: ["#739FFC", "#71DEB4"],
      legend: {
        data: ["自住", "出租"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: [
            "1号楼",
            "2号楼",
            "3号楼",
            "4号楼",
            "5号楼",
            "6号楼",
            "7号楼",
            "8号楼",
            "9号楼",
            "10号楼",
            "11号楼",
            "12号楼",
            "13号楼",
            "14号楼"
          ]
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "自住",
          type: "bar",
          data: [
            320,
            332,
            301,
            334,
            390,
            330,
            320,
            320,
            332,
            301,
            334,
            390,
            330,
            320
          ]
        },

        {
          name: "出租",
          type: "bar",
          data: [
            862,
            1018,
            964,
            1026,
            1879,
            1600,
            1570,
            862,
            1018,
            964,
            1026,
            1879,
            1600,
            1570
          ]
        }
      ]
    };
    myChart1.setOption(option1);
    myChart2.setOption(option2);
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
.active {
  padding: 20px 30px;
  width: 100%;
  border-radius: 10px;
  background-color: #fff;
  margin-bottom: 20px;
  .header {
    font-size: 20px;
    margin-bottom: 35px;
    padding-bottom: 19px;
    border-bottom: 1px solid #f5f5f5;
  }
  .bodyobj {
    display: flex;
    flex-wrap: wrap;
    .body {
      position: relative;
      margin-right: 20px;
      margin-bottom: 30px;
      width: 220px;
      height: 110px;
      .description {
        position: absolute;
        top: 28px;
        left: 20px;
        span {
          font-size: 16px;
          color: #fff;
        }
        i {
          font-style: initial;
          font-size: 28px;
          color: #fff;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
#pies {
  position: absolute;
  top: 62px;
  width: 100%;
  height: 90%;
  padding-top: 30px;
  border-top: 1px solid #f5f5f5;
}
#square {
  position: absolute;
  top: 62px;
  padding-top: 30px;
  width: 100%;
  height: 90%;
  border-top: 1px solid #f5f5f5;
}

.bottomoffset {
  display: flex;
  .father1 {
    position: relative;
    border-radius: 10px;
    flex: 2;
    margin-right: 20px;
    height: 840px;
    background-color: #fff;
    .son1 {
      position: absolute;
      top: 20px;
      left: 23px;
      padding-bottom: 16px;
      display: flex;
      justify-content: space-between;
      width: 510px;
      font-size: 16px;
    }
  }
  .father2 {
    position: relative;
    border-radius: 10px;
    background-color: #fff;
    height: 840px;
    flex: 1;
    .son2 {
      position: absolute;
      top: 20px;
      left: 23px;
      padding-bottom: 16px;
      display: flex;
      justify-content: space-between;
      width: 510px;
      font-size: 16px;
    }
  }
}
</style>
